<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
	<script type="text/javascript" src="Lib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/bird/pc4.png')"></canvas>
            <br />
            <center> <div id="distance" style="width:50px;overflow:hidden;"></div>  </center>
           
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Flappy pacman</h2>
				Clone after the renound game Flappy Bird.
                <br />
                Featuring - gravity, velocities control and images and others.<br />
                Just use the top arrow key to control the pacman.<br />
                If you die, refresh to continue...
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Scene2D("c");

	    function FlappyBird(scene) {
	        this.scene = scene;
	        this.groundHeight = 25;
	        this.birdWidth = 44.5;
	        this.birdHeight = 38;
	        this.openingHeight = 4 * this.birdHeight;
	        this.obstacleSpeed = -100;
	        this.startTime = 0;

	        
	        this.addEventSimple = function (elem, event, fn) {
	            if (elem.addEventListener) {
	                elem.addEventListener(event, fn, false);
	            } else {
	                elem.attachEvent("on" + event, function() {
	                    // set the this pointer same as addEventListener when fn is called
	                    return(fn.call(elem, window.event));   
	                });
	            }
	        }

	        this.initGround = function () {
	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;
	            var ground = new Rectangle2D(0, canvas.height - groundHeight, canvas.width, canvas.height - groundHeight);
	            ground.fill.enabled = true;
	            ground.fill.color = "#0A1F33";
	            ground.id = "ground1";
	            this.scene.add(ground);

	            ground = new Rectangle2D(0, 0, canvas.width, groundHeight);
	            ground.fill.enabled = true;
	            ground.fill.color = "#0A1F33";
	            ground.id = "ground2";
	            this.scene.add(ground);
	        }

	        this.initBird = function () {
	            this.startTime = null;
	            this.birdHeight = 50;
	            this.openingHeight = 4 * this.birdHeight;
	            this.initialHeight = 4 * this.birdHeight;

	            this.obstacleSpeed = -300;

	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;

                
	            
	            var self = this;
	            //self.bird = new Rectangle2D(150, 200, 50, 50);
	            //self.bird = new Image2D(150, 200, self.birdHeight, self.birdHeight, "./images/bird/pc1.png");
	            self.bird = new ImageSprite2D(150,200,self.birdWidth, self.birdHeight,1,4,self.birdWidth, self.birdHeight, "./images/bird/flappingBird.png")
	            self.bird.id = "bird";
	            self.bird.addForce("gravity", 0, 200);
	            //self.bird.fill.enabled = true;
	            //self.bird.fill.color = "blue";
	            //self.bird.borderRadius = 5;

	            self.scene.add(self.bird);

	            self.birdInterval = setInterval(function () {
	                self.bird.setNextSpriteOnRow();
	            },200);

	            this.addEventSimple(window, "keydown", function (e) {
	                var evt = (e) ? e : (window.event) ? window.event : null;
	                if (evt) {
	                    var key = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
	                    if (key == 38)
	                    {
	                        // up
	                        self.bird.velocity.dy = -200;
	                    }	                    
	                }
	            });

	            var movingCheck = function (args) {
	                for (var i = 0; i < self.scene.shapes.length; i++) {
	                    var shape = self.scene.shapes[i];
	                    if (shape.id != "bird") {
	                        // allow slight collitions
	                        if (shape.intersects({
	                            x: self.bird.location.x + 5,
	                            y: self.bird.location.y + 5
	                        }, {
	                            width: self.bird.size.width - 10,
	                            height: self.bird.size.height - 10
	                        })) {
	                            //debugger;
	                            if (self.interval)clearInterval(self.interval);
	                            if (self.birdInterval)clearInterval(self.birdInterval);	                                
	                            return false;
	                        }
	                    }
	                }
	                if (args.shape.name == "obstacle") {
	                    if (args.shape.x < -args.shape.width) {
	                        args.shape.unbind("onmoving", movingCheck);
	                        self.scene.remove(args.shape);
	                        args.shape = null;
	                    }
	                }
	                if (!self.startTime) self.startTime = args.time;
	                else {
	                    var dist = (args.time - self.startTime) * self.obstacleSpeed * -1 / 10000;
	                    dist = Math.floor(dist);
	                    $("#distance").html(dist + " m");

	                    var newOpeningHeight = self.initialHeight - dist / 10;
	                    if (newOpeningHeight > 2 * self.birdHeight) self.openingHeight = newOpeningHeight;

	                    /*if (self.obstacleSpeed >= -300) {
	                        self.obstacleSpeed = -100 - dist / 3;
	                    }*/
	                }
	                return true;
	            }

	            var doAnimation = function(){
	                var obstacleWidth = 50;
	                //console.log(self.openingHeight);
	                var totalHeight = self.scene.canvas.height - 2 * self.groundHeight - self.openingHeight;
	                var top = Math.floor((Math.random() * totalHeight) + 0);	                

	                var heightPercent = top / 396;

	                var topObstacle = new PartialImage2D(self.scene.canvas.width, self.groundHeight, obstacleWidth, top,"./images/bird/pc3.png");	                
	                topObstacle.name = "obstacle";
	                topObstacle.setClippingRectangle(0, 396 - 396 * heightPercent, 50, 396 * heightPercent);
	                topObstacle.velocity.dx = self.obstacleSpeed;
	                self.scene.add(topObstacle);	                

	                var bottomObstacle = new PartialImage2D(self.scene.canvas.width, self.scene.canvas.height - self.groundHeight, obstacleWidth, totalHeight - top, "./images/bird/pc2.png");
	                bottomObstacle.name = "obstacle";
	                bottomObstacle.setClippingRectangle(0, 0, 50, (1-heightPercent) * 396);	                
	                bottomObstacle.location.y = self.scene.canvas.height - self.groundHeight - (totalHeight - top);
	                bottomObstacle.velocity.dx = self.obstacleSpeed;	                
	                self.scene.add(bottomObstacle);
	                
	                topObstacle.bind("onmoving", movingCheck);
	                bottomObstacle.bind("onmoving", movingCheck);
	                //console.log(4000 * (-100 / self.obstacleSpeed));
	                //self.interval = setTimeout(doAnimation, 4000);
	            }

	            doAnimation();
	            this.inverval = setInterval(doAnimation, 1500);
	            self.bird.bind("onmoving", movingCheck);
	        }
	        

	        this.init = function () {
	            this.initGround();
	            this.initBird();
	            this.scene.invalidate();
	        }	       
	    }

	    var game = new FlappyBird(scene);
	    game.init();
	   
	    

	  
	</script>
</body>
</html>